{% extends 'base.html' %}
{% load static %}

{% block title%}Books | {{ block.super}}{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<link rel="stylesheet" href="{% static 'css/map-style.css' %}">
<link rel="stylesheet" href="{% static 'css/leaflet-search.css' %}">

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>

<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>

<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"></script>

<script src="{% static 'js/leaflet-control.min.js' %}"></script>

<!-- Bootstrap Datepicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

<link rel="stylesheet" href="{% static '/dist/MarkerCluster.css' %}" />
<link rel="stylesheet" href="{% static '/dist/MarkerCluster.Default.css' %}" />
<script src="{% static '/dist/leaflet.markercluster-src.js' %}" /></script>


{% endblock head_extra %}

{% block content %}

<div class="container">
    </div>
    <div id="mapid"></div>
    <div class="container">
        <br />
            <div class="card" style="width: auto;">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                <h3>

                    <form action="{% url 'books:csv' %}">

                        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                            Filter Books
                        </a>
                        <input type="submit" class="btn btn-info" form="id_query_form" formaction="{% url 'books:csv' %}" value="Export CSV">
                        <input type="submit" class="btn btn-default" form="id_query_form" formaction="{% url 'books:xls' %}" value="Export XLS">
                    </form>
                </h3>
                </div>
                <div style="text-align: right" class="col-md-6">
                    {{ books.count }} book{{ books | pluralize }} - {{ page_count }} page{{ page_count | pluralize }}
                </div>
                </div>

                    <div class="collapse" id="collapseExample">
                        <hr>
                        <p class="">Use this form to filter books by different attributes</p>

                        <p class="">
                        
                            <form method="get" action="." id="id_query_form">
                                <p>
                                    {{ form.keywords }}
                                </p>
                                <div class="row">
                                    <div class="col-md-6">
                                        {{ form.publish_date_before }}
                                    </div>
                                    <div class="col-md-6">
                                            {{ form.publish_date_after }}
                                    </div>
                                    
                                </div>
                                 
                                
                                <p></p>
                                <p>
                                    <input class="btn btn-success" type="submit"/>
                                    <button type="reset" class="btn btn-info" value="Reset filters">Reset filters</button>
                                    <button type="reset" class="btn btn-warning" id="id_clear_filters" onclick="return resetForm(this.form);">Clear Filters</button>
                                </p>
 
                            </form>
                            <script>
                                function resetForm(form) {
                                    // clearing inputs
                                    var inputs = form.getElementsByTagName('input');
                                    for (var i = 0; i<inputs.length; i++) {
                                        switch (inputs[i].type) {
                                            // case 'hidden':
                                            case 'text':
                                                inputs[i].value = '';
                                                break;
                                            case 'radio':
                                            case 'checkbox':
                                                inputs[i].checked = false;   
                                        }
                                    }

                                    // clearing selects
                                    var selects = form.getElementsByTagName('select');
                                    for (var i = 0; i<selects.length; i++)
                                        selects[i].selectedIndex = 0;

                                    // clearing textarea
                                    var text= form.getElementsByTagName('textarea');
                                    for (var i = 0; i<text.length; i++)
                                        text[i].innerHTML= '';

                                    return false;
                                }
                            </script>
                            
                        </p>
                     
                    </div>
                    </div>
                </div>
            </div>


            <div class="container">
                
    <script>        

        var mymap = new L.Map('mapid', {zoom: 9, center: new L.latLng([40,13]) });	//set center from first location

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: 'pk.eyJ1IjoiYnJpYW5jYWZmZXkiLCJhIjoiY2pkczJycjl5MmhqbTMzbzQ3bHJuaHA3aiJ9.cvRYYPNjQJVpFjdUcmIHzA'
        }).addTo(mymap);


        // var markers = L.markerClusterGroup();

        var bookIcon = L.icon({
            iconUrl: '/static/images/marker-icon.png',
            iconSize:     [35, 35], // size of the icon
            // shadowSize:   [50, 64], // size of the shadow
            iconAnchor:   [17, 35], // point of the icon which will correspond to marker's location
            // shadowAnchor: [4, 62],  // the same for the shadow
            popupAnchor:  [0, -30] // point from which the popup should open relative to the iconAnchor
            });

        // var markersLayer = new L.LayerGroup();	//layer contain searched elements
        
        var markersLayer = L.markerClusterGroup();


        mymap.addLayer(markersLayer);

        var controlSearch = new L.Control.Search({
            position:'topright',		
            layer: markersLayer,
            initial: false,
            zoom: 12,
            marker: false
        });

        mymap.addControl( controlSearch );

        function populateMap(data){
            for(i in data) {
            var title = data[i].title,	//value searched
                loc = data[i].loc,		//position found
                url = data[i].url,
                marker = new L.Marker(new L.latLng(loc), {title: title, icon: bookIcon} );//se property searched
            marker.bindPopup('<p><a href="'+ url + '">' + title + '</a></p>');
            markersLayer.addLayer(marker);
            }
        }

        // use context variable instead of making AJAX call 
        var map_books =  JSON.parse('{{ map_books }}')
        var new_lat = map_books[0].loc[0]
        var new_lon = map_books[0].loc[1]
        mymap.setView([0, 0], 2);
        populateMap(map_books)

    </script>
    <hr>
    <table id="book-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Pages</th>
                    <th>Publish Date</th>
                    <th>Website</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Title</th>
                    <th>Pages</th>
                    <th>Publish Date</th>
                    <th>Website</th>
                </tr>
            </tfoot>
            <tbody>
                {% for book in books %}
                <tr>
                    <td><a href="{{ book.get_absolute_url }}">{{ book.title }}</td></a>
                    <td>{{ book.pages }}</td>
                    <td>{{ book.publish_date }}</td>
                    <td><a href="{{ book.website }}">{{ book.website }}</a></td>
                </a></tr>
                {% endfor %}
            </tbody>
        </table>
        <br />
        <script>
            $(document).ready(function() {
                $('#book-table').DataTable({
                    order: [[ 0, "desc" ]],
                    buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
                });
            } );
        </script>
    
</div>

<script>
    $( document ).ready(function() {
        $( "#datepicker1" ).datepicker();
        $( "#datepicker2" ).datepicker();
    });
</script>

{% endblock %}

